<template>
	<div class="alert fade show" :class="[alertType]" role="alert" ref="alert">
		<button type="button" class="close"  aria-label="Close" v-if="closeAble" @click="close">
			<span aria-hidden="true">&times;</span>
		</button>
		<slot></slot>
	</div>
</template>
<style>
</style>
<script>
	import util from "../../util/index.js";
    export default{
    	name: "Alert",
    	props: {
    		"type": {
    			type: String,
			    default: "success"
		    },
		    closeAble: {
    			type: Boolean,
			    default: false
		    }
	    },
        data(){
            return{
            }
        },
        methods: {
        	close: function() {
        		this.$emit("close-bs-alert");
		        util.remove(this.$refs["alert"]);
        	    this.$emit("closed-bs-alert");
        	    this.$destroy();
	        }
        },
        computed: {
        	alertType: function() {
        		return "alert-" + this.type;
	        }
        }
    }
</script>
